<template>
    <div class="meeting-details">
      <h1 class="title">会议详情</h1>
      
      <el-form 
        ref="formRef"
        :model="form"
        label-position="top"
        class="meeting-form"
        :disabled="!canEdit"
      >
        <!-- 会议主题 -->
        <el-form-item label="会议主题" prop="title" required>
          <el-input v-model="form.title" placeholder="会议主题" :disabled="!canEdit" />
        </el-form-item>
  
        <!-- 会议时间 -->
        <el-form-item label="会议时间" required>
          <div class="time-picker-group">
            <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="会议日期"
              format="YYYY/MM/DD"
              :disabled="!canEdit"
            />
            <el-time-select
              v-model="form.startTime"
              placeholder="会议时间"
              start="00:00"
              step="00:30"
              end="23:30"
              :disabled="!canEdit"
            />
          </div>
        </el-form-item>
  
        <!-- 会议时长 -->
        <el-form-item label="会议时长" required>
          <el-select v-model="form.duration" placeholder="会议时长" :disabled="!canEdit">
            <el-option label="30分钟" value="30" />
            <el-option label="1小时" value="60" />
            <el-option label="1.5小时" value="90" />
            <el-option label="2小时" value="120" />
            <el-option label="更长时间" value="longer" />
          </el-select>
        </el-form-item>
  
        <!-- 会议标签 -->
        <el-form-item label="会议标签" required>
          <el-select v-model="form.tags" multiple placeholder="会议标签" :disabled="!canEdit">
            <el-option
              v-for="tag in tags"
              :key="tag.value"
              :label="tag.label"
              :value="tag.value"
            />
          </el-select>
        </el-form-item>
  
        <!-- 参会方式 -->
        <el-form-item label="参会方式" required>
          <el-radio-group v-model="form.participationMode" :disabled="!canEdit">
            <el-radio label="online">线上</el-radio>
            <el-radio label="offline">线下</el-radio>
          </el-radio-group>
        </el-form-item>
  
        <!-- 线下会议详情 -->
        <div v-if="form.participationMode === 'offline'">
          <el-form-item label="会议地点">
            <el-input v-model="form.location" placeholder="会议地点" :disabled="!canEdit" />
          </el-form-item>
          <el-form-item label="会场规则">
            <el-input v-model="form.rules" placeholder="会场规则" :disabled="!canEdit" />
          </el-form-item>
          <el-form-item label="餐饮服务">
            <el-input v-model="form.catering" placeholder="餐饮服务安排" :disabled="!canEdit" />
          </el-form-item>
        </div>
  
        <!-- 会议设置 -->
        <el-form-item label="会议设置">
          <div class="settings-group">
            <el-checkbox v-model="form.settings.allowRecording" :disabled="!canEdit">是否允许录制</el-checkbox>
            <el-checkbox v-model="form.settings.allowReplay" :disabled="!canEdit">是否允许查看会议重播</el-checkbox>
            <el-checkbox v-model="form.settings.isPublic" :disabled="!canEdit">是否公开</el-checkbox>
          </div>
        </el-form-item>
  
        <!-- 参会人员列表 -->
        <el-form-item label="参会人员"   v-if=" canEdit">
          <el-tag
            v-for="user in participants"
            :key="user.id"
            class="tag"
            style="margin-right: 8px; margin-bottom: 8px;"
          >
            {{ user.name }}
          </el-tag>
        </el-form-item>
      </el-form>
  
      <!-- 底部按钮 -->
      <div class="form-actions">
        <el-button
          v-if="isCreator && canEdit"
          type="primary" 
          @click="saveChanges"
        >
          保存修改
        </el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
  
  const formRef = ref<FormInstance>()
  
  // 模拟数据
  const form = reactive({
    title: '技术讨论会',
    startDate: '2025/02/12',
    startTime: '10:00',
    duration: '60',
    tags: ['AI', 'Tech'],
    participationMode: 'online',
    location: '',
    rules: '',
    catering: '',
    settings: {
      allowRecording: true,
      allowReplay: true,
      isPublic: true,
    },
  })
  
  const tags = ref<Array<{ label: string; value: string }>>([
    { label: '人工智能', value: 'AI' },
    { label: '电子科技', value: 'Tech' },
  ])
  
  const participants = ref([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
  ])
  
  const currentUser = ref({ id: 1 }) // 当前用户的 ID，假设当前用户是张三（创建者）
  
  const isCreator = computed(() => currentUser.value.id === 1) // 判断是否为创建者
  const isStarted = computed(() => false) // 模拟会议是否开始
  const canEdit = computed(() => isCreator.value && !isStarted.value) // 判断是否可以编辑
  
  const goBack = () => {
    window.history.back()
  }
  
  const saveChanges = () => {
    // 保存修改
    ElMessage.success('修改已保存')
  }
  
  onMounted(() => {
    // 模拟 API 请求等
  })
  </script>
  
  <style scoped lang="scss">
  .meeting-details {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  
    .title {
      font-size: 24px;
      margin-bottom: 30px;
      color: var(--el-text-color-primary);
    }
  
    .meeting-form {
      :deep(.el-form-item) {
        margin-bottom: 24px;
      }
    }
  
    .time-picker-group {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }
  
    .settings-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
  
    .form-actions {
      margin-top: 40px;
      display: flex;
      gap: 16px;
      justify-content: flex-start;
    }
  
    .tag {
      background-color: #f1f1f1;
      color: #555;
    }
  }
  </style>
  